<template>
    <CommonCard title="累计用户数" :value="768923">
        <template #default>
            <v-chart :option="option"></v-chart>
        </template>
        <template #footer>
            <div class="wrapper">
                <div>
                    <span>日同比</span>
                    <span class="css-1">12.35%</span>
                    <span class="increase"></span>
                </div>
                <div>
                    <span>月同比</span>
                    <span class="css-1">23.97%</span>
                    <span class="increase"></span>
                </div>
            </div>
        </template>
    </CommonCard>
</template>

<script setup>
import CommonCard from './CommonCard.vue';
import { ref } from 'vue';

const option = ref({
    xAxis: {
        type: 'value',
        show: false
    },
    yAxis: {
        type: 'category',
        show: false
    },
    grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    series: [{
        type: 'bar',
        data: [130],
        itemStyle: {
            color: 'green'
        },
        stack: 'total',
        barWidth: 10,
    },
    {
        type: 'bar',
        data: [30],
        itemStyle: {
            color: 'gray'
        },
        stack: 'total',
        barWidth: 10,
    },
    {
      // 自定义形状
      type: 'custom',
      data: [130],
      renderItem: (params, api) => {
        // 设置三角形的点的坐标(x,y)
        const endPoint = api.coord([api.value(0), 0])
        // 返回值, 用于创建自定义形状
        return {
          type: 'group', // 组(包含两个三角形)
          children: [
            // 使用svg的path路径绘制三角形
            {
              type: 'path',
              shape: {
                d: 'M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z',
                x: endPoint[0] - 5,
                y: 35,
                width: 10,
                height: 10,
                layout: 'cover',
              },
              style: {
                fill: 'green',
              },
            },
            {
              type: 'path',
              shape: {
                d: 'M889.696 320.8H158.848l365.504 365.536 365.344-365.536z',
                x: endPoint[0] - 5,
                y: 5,
                width: 10,
                height: 10,
                layout: 'cover',
              },
              style: {
                fill: 'green',
              },
            },
          ]
        }
      }
    }]
})
</script>

<style scoped>
.wrapper {
    display: flex;
    justify-content: space-between;
}
</style>